<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Главная страница</title>
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
    <link rel="stylesheet" type="text/css" href="/css/indexStyle.css">
</head>
<body>

<div class="wrapper">
    <nav class="nav">
        <div class="nav-logo">
            <p>Task Menegment</p>
        </div>
        <div class="nav-menu" id="navMenu">
            <ul>
                <li><a href="#home" class="link active">Главная</a></li>
                <li><a href="#services" class="link">Сервисы</a></li>
                <li><a href="#about" class="link">О нас</a></li>
            </ul>
        </div>
        <div class="nav-button">
            <span style="font-size: 16px; right: 10px;" th:if="${loggedInUsername != null}" th:text="${loggedInUsername}"></span>
            <a th:if="${loggedInUsername != null}" th:href="@{/logout}" style="text-decoration: none; color: black;">
                <button class="btn" style="font-size: 16px;">Выход</button>
            </a>
            <a th:if="${loggedInUsername == null}" th:href="@{/login}" style="text-decoration: none; color: black;">
                <button class="btn white-btn" style="font-size: 16px;">Вход</button>
            </a>
            <a th:if="${loggedInUsername == null}" th:href="@{/register}" style="text-decoration: none; color: black;">
                <button class="btn" style="font-size: 16px;">Регистрация</button>
            </a>
        </div>

        <div class="nav-menu-btn">
            <i class="bx bx-menu" onclick="myMenuFunction()"></i>
        </div>
    </nav>

    <div id="home">
        <div>
            <h1>Легко управляйте своими задачами</h1>
            <h1>и сотрудничайте с командой</h1><br>
            <p>Откройте для себя нашу интерактивную платформу, которая упрощает
                аутентификацию пользователей, создание групп и управление задачами. Наслаждайтесь
                удобной навигацией по системе входа в систему и регистрации.</p>
        </div>

        <div class="nav-button">
            <a th:href="@{/taskPage}" class="btn" style="text-decoration: none; color: black;"><strong>Приступить к задачам</strong></a>
        </div>

    </div>



    <div id="services">
        <div class="images-text-wrapper">
            <img src="/jpg/index/task-list.png" class="image">
            <img src="/jpg/index/password-access.png" class="image">
        </div>

        <div class="section-content">
            <header>Наши сервисы</header>
            <h2>Упростите выполнение повседневных задач</h2>
            <p>Мы предлагаем интуитивно понятные инструменты для создания, назначения и отслеживания задач, что позволяет сократить время на выполнение повседневных задач.</p>
            <h2>Оптимизируйте совместную работу вашей команды</h2>
            <p>Наша платформа обеспечивает эффективное сотрудничество и коммуникацию между участниками команды, что позволяет достигать лучших результатов в работе.</p>
            <h2>Повысьте производительность благодаря интуитивно понятной платформе управления задачами</h2>
            <p>С нашими инструментами вы сможете организовать свой рабочий процесс так, чтобы каждый участник команды был максимально продуктивен и эффективен.</p>
            <h2>Откройте для себя возможности простой аутентификации пользователей, создания групп и управления задачами</h2>
            <p>Наша платформа предлагает широкий спектр функциональных возможностей, включая создание групп пользователей, управление доступом и многое другое.</p>
        </div>
    </div>


    <div id="about">
        <div class="section-content">
            <header>О нашей компании</header>
            <p>Мы - команда профессионалов в области разработки программного обеспечения, которая стремится помочь компаниям и командам повысить эффективность своей работы.</p>
            <p>Наша миссия - предоставить пользователям удобные и надежные инструменты для управления задачами, которые помогут им достигать своих целей быстрее и эффективнее.</p>
            <p>Мы гордимся тем, что наша платформа помогает многим компаниям повышать производительность и качество своей работы, а также сделать рабочий процесс более удобным и прозрачным.</p>
            <p>Присоединяйтесь к нам и давайте вместе создавать лучшее будущее для вашего бизнеса!</p>
        </div>
    </div>
</div>

<script th:inline="javascript">
    /*<![CDATA[*/
    var loggedInUsername = /*[[${loggedInUsername}]]*/ null;
    /*]]>*/
</script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var links = document.querySelectorAll('.link');
        links.forEach(function(link) {
            link.addEventListener('click', function(event) {
                event.preventDefault();

                // Удаление класса "active" у всех ссылок
                links.forEach(function(item) {
                    item.classList.remove('active');
                });

                // Добавление класса "active" к выбранной ссылке
                this.classList.add('active');

                var targetId = this.getAttribute('href');
                var targetElement = document.querySelector(targetId);
                if (targetElement) {
                    targetElement.scrollIntoView({ behavior: 'smooth' });
                }
            });
        });
    });

    function myMenuFunction() {
        var i = document.getElementById("navMenu");
        if(i.className === "nav-menu") {
            i.className += " responsive";
        } else {
            i.className = "nav-menu";
        }
    }

    document.addEventListener('scroll', function() {
        var contents = document.querySelectorAll('.section-content');
        contents.forEach(function(content) {
            var contentPosition = content.getBoundingClientRect().top;
            var screenPosition = window.innerHeight;

            if (contentPosition < screenPosition) {
                content.style.opacity = '1'; /* Показываем контент, если он виден на экране */
            }
        });
    });

    document.addEventListener('DOMContentLoaded', function() {
        var links = document.querySelectorAll('.link');
        links.forEach(function(link) {
            link.addEventListener('click', function(event) {
                event.preventDefault();
                var targetId = this.getAttribute('href');
                var targetElement = document.querySelector(targetId);
                if (targetElement) {
                    targetElement.scrollIntoView({ behavior: 'smooth' });
                }
            });
        });
    });

</script>

</body>
</html>